<!-- 编辑人员 -->
<template>
  <div class="foregroundRole">
    <ul v-if="foreData.length">

      <li v-for="(item,index) in foreData" :key="index">
        <div class="tit">
          <span>{{item.roleName}}</span>（共服务{{item.total}}个案场，其中{{item.exist?item.exist:0}}个为在案案场，{{item.noExist?item.noExist:0}}个为离案案场）
        </div>
        <p>
          <span v-for="(item,index) in item.buildingVOList" :class="{'active':item.flag==1}"
            :key="index">{{item.buildingName}}</span>
        </p>
      </li>

    </ul>
    <div class="noData" v-else>该人员暂无前台角色</div>
  </div>
</template>

<script>
  import roleMgr from '@/biz/role/role'
  export default {
    props: ['messInfo'],
    data() {
      return {
        foreData: []
      }
    },
    watch: {
      messInfo(val) {
        console.log(val,
          'this.messInfothis.messInfothis.messInfothis.messInfothis.messInfo444')
        this.staffTel = val.phone
      }
    },
    created() {
      console.log(this.messInfo, 'me55');
      this.getFrontDeskRoles()
    },
    methods: {
      // 获取前端角色服务的案场
      getFrontDeskRoles() {

        let params = {

          userId: this.messInfo.userId
        }
        roleMgr.getFrontDeskRoles(params).then((res) => {
          console.log(res, 'res');
          this.foreData = res

        }).catch(() => {

        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .foregroundRole {
    ul {
      max-height: 400px;
      overflow-y: auto;

      li {
        border-bottom: 1px #ccc solid;
        padding: 14px 0;

        .tit {
          span {
            font-size: 14px;
            font-weight: bold;
          }
        }

        p {
          overflow: hidden;
          margin-top: 10px;

          span {
            float: left;
            margin-right: 10px;
            line-height: 1.8;

          }
        }
      }
    }
  }

  .active {
    color: #2d8cf0
  }
</style>